<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>心</title>
		<style>
		/* 1.抓到div */
		div{
			width: 300px;
			height: 300px;
			transform: rotate(135deg);
			/* 效果 背景色 */
			background-color: #e4393c;
			/* 外边距属性  推   效果  居中 */
			margin-left: 10px;
			margin-top: 50px;
			/* 居中  上下  左右  页面宽度固定 */
			margin: 300px auto;
			/* 美化操作：滤镜属性--下阴影效果  光晕 */
			filter: drop-shadow(0 0 100px #47093f);
			/* 启动动画属性 */
			animation: heart .8s linear infinite;
			
			
		}
		/* 两圆 */
		/* 伪类选择器  追加效果：ofter   语法： 任意选择器  功能：在元素之后生成一行文本内容*/
		div:after{
			content:"";
			/* html很多元素：种类
			 文本内容-->行内元素，特点：不可设置宽高  在一行内显示
			 块元素，特点：可设宽高  独占一行
			 行内元素转换为块元素---display属性：行转块
			 */
			display: block;
			width: 300px;
			height: 300px;
			background-color: #e4393c;
			/* 倒角：画圆 */
			border-radius: 50%;
			position: relative;
			top: -150px;
			left: 0px;
				}
			div:before{
				content:"";
				
				display: block;
				width: 300px;
				height: 300px;
				background-color: #e4393c;
				/* 倒角：画圆 */
				border-radius: 50%;
				position: relative;
				left: -150px;
				top: 0px;
				
				}
				/* 关键帧属性  功能  手翻书功能 */
				@keyframes heart{
				0%{
					transform: rotate(135deg) scale(1);
				}	
				30%{
					transform: rotate(135deg) scale(.8);
				}
				100%{
					transform: rotate(135deg) 6scale(1.2);
				}
				}
	
		</style>
	</head>
	<body>
		<!-- 心  html  div -->
		<div></div>
	</body>
</html>